<template>
  <div class="box-item">
    <div class="box-title">线路货量排名</div>
    <div class="box-body">
      <div class="list">
        <div class="list-header">
          <div class="no">序号</div>
          <div class="first">名称</div>
          <div class="last">票数</div>
          <div class="foured">吨位</div>
        </div>
        <div class="list-item" v-for="(item, index) in tableData" :class="index == chooseIndex ? ' deep_color' : ''"
          :key="index" @click="showChatFun(index)">
          <div class="no">{{ index + 1 < 10 ? '0' + (index + 1) : index }}</div>
              <div class="first">{{ item.waybillname }}</div>
              <div class="last">{{ item.waybillNum }}</div>
              <div class="foured">{{ item.waybillCompleteNum }}</div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import { colorsA, colorsB, legend, xAxis, yAxis } from '@/config/EChartVar';

export default {
  name: 'DJtopleft',
  data() {
    return {
      options: {},
      tableData: [
        { waybillname: '临沂-上海', waybillNum: '792', waybillCompleteNum: '1089' },
        { waybillname: '临沂-北京', waybillNum: '756', waybillCompleteNum: '1040' },
        { waybillname: '临沂-济南', waybillNum: '712', waybillCompleteNum: '998' },
        { waybillname: '临沂-青岛', waybillNum: '679', waybillCompleteNum: '892' },
        { waybillname: '临沂-苏州', waybillNum: '665', waybillCompleteNum: '794' },
      ],
      pageflag: true,
      timer: null,
      chooseIndex: '10'
    };
  },
  created() {
    this.getData();
  },
  mounted() { },
  beforeDestroy() { this.clearData(); },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    showChatFun(index) {
      console.log('index==' + index)
      this.showChat = true
      this.chooseIndex = index
    },
    getData() {
    },
  },
};
</script>

<style lang="scss" scoped>
.box-item {
  width: 297px;
  height: 292px;
  background: url('../../../assets/img/launch/internet/homeTopbox.png') no-repeat center;
  background-position: center center;
  background-size: 100% 100%;
  // margin-bottom: 25px;

  .box-title {
    position: relative;
    height: 55px;
    line-height: 55px;
    // text-indent: 1em;
    font-size: 18px;
    font-weight: 600;
    margin-left: 24px;

    &::after {
      position: absolute;
      top: -2px;
      content: url('../../../assets/img/launch/pack/pack_nav.png');
    }
  }

  .box-body {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    // height: 320px;

    .list {
      width: calc(100% - 47px);
      margin: -8px 23px auto 24px;

      .list-header {
        border: 1px solid #0D508C;
        display: flex;
        justify-content: space-around;
        height: 32px;
        line-height: 32px;
        color: rgba($color: #ffffff, $alpha: 0.8);

        .no {
          text-align: left;
          margin-left: -10px;
        }

        .first {
          text-align: center;
        }
      }

      .list-item {
        border: 1px solid #153c81;
        margin-top: 6px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        color: rgba($color: #ffffff, $alpha: 0.92);
        font-weight: bold;
        cursor: pointer;

        .no {
          width: 25px;
          height: 24px;
          background: url('../../../assets/img/launch/home/icon.png') no-repeat 0% 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: -8px;
        }

        .first {
          // position: relative;
          display: flex;
          text-align: center;
          align-items: center;
          cursor: pointer;
        }

        .last {
          text-align: center;
          cursor: pointer;
        }
      }

      .deep_color {
        border: 1px solid #26A0F2;
        background: #042B58;
      }
    }
  }
}
</style>